<template>
	<view>
		<u-slider v-model="current" block-width="20" inactive-color="#efefef" block-color="#007aff"></u-slider>
		<view class="bottom-container">
			<img class="icon" src="@/assets/img/icon.jpg" />
			<text class="title">{{ playingDetail.albumName || '--'}}</text>
			<text class="singer">- {{ playingDetail.artistName || '--'}}</text>
			<text class="level">VIP</text>
			<u-icon class="love" :name="loveStatus ? 'heart-fill' : 'heart'" @click="loveStatus = -1 * loveStatus + 1"
				size="36" :color="loveStatus ? '#ee5e5b' : '#666'"></u-icon>
			<view class="controller">
				<view class="loop-type-view">
					<view class="loop-type-select" v-show="showLoopType">
						<text @click="updateLoopType(0)">单曲循环</text>
						<text @click="updateLoopType(1)">顺序播放</text>
						<text @click="updateLoopType(2)">随机播放</text>
					</view>
					<img class="loop-img" @click="showLoopType = !showLoopType" src="@/assets/img/loop.svg" />
				</view>
				<u-icon name="skip-back-left" size="40" color="#666" index="left" @click="prev"></u-icon>
				<u-icon :name="!playStatus ? 'play-circle-fill' :'pause-circle-fill'" class="play" size="75"
					@click="updatePlayStatus"></u-icon>
				<u-icon name="skip-forward-right" size="40" color="#666" @click="next"></u-icon>
				<u-icon class="list" name="list-dot" size="50" color="#666" @click="showPlayList"></u-icon>
			</view>
			<u-popup v-model="show" mode="right" length="300pxvn">
				<PlayingList :list="playList" />
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getPlayStatus,
		playPrev,
		playNext,
		startPlay,
		pausePlay
	} from '@/apis/music.js'
	import PlayingList from './playingList'
	export default {
		components: {
			PlayingList
		},
		data() {
			return {
				current: 10,
				playStatus: 0,
				loveStatus: 0,
				show: false,
				playingDetail: {

				},
				playList: [],
				loopType: '',
				loopOption: [{
					label: '单曲循环',
					value: 1
				}],
				showLoopType: false
			}
		},
		mounted() {
			this.initData()
			// setInterval(() => {
			// 	this.initData()
			// }, 1000)
		},
		methods: {
			updateLoopType(type){
				console.log(type)
				this.showLoopType = false
			},
			async updatePlayStatus() {
				// 判断当前状态
				if (this.playStatus) {
					// 暂停
					await pausePlay({
						deviceId: this.DeviceId
					})
				} else {
					// 开始
					await startPlay({
						deviceId: this.DeviceId
					})
				}
				this.playStatus = -1 * this.playStatus + 1
			},
			async prev() {
				console.log(123)
				await playPrev({
					deviceId: this.DeviceId
				})
				this.initData()
			},
			async next() {
				console.log(123)
				await playNext({
					deviceId: this.DeviceId
				})
				this.initData()
			},
			showPlayList() {
				this.show = true
			},
			async initData() {
				const data = await getPlayStatus({
					deviceId: this.DeviceId
				})
				if (!data.audioInfo) {
					this.playStatus = 0
				} else {
					this.playStatus = 1
					this.playingDetail = data.audioInfo.detail
					this.current = data.audioInfo.position * 100 / data.audioInfo.duration
					this.playList = data.audioInfo.trackList
					console.log(this.playList)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-container {
		width: 100%;
		height: 100%;
		display: flex;
		padding-left: 30px;
		align-items: center;
		margin-top: 5px;

		.icon {
			width: 45px;
			height: 45px;
			border-radius: 4px;
		}

		.title {
			font-weight: bold;
			margin-left: 20px;
		}

		.singer {
			font-size: 12px;
			margin-left: 10px;
		}

		.level {
			color: #2979ff;
			border: 1px solid #007aff;
			border-radius: 10px;
			width: 30px;
			font-size: 12px;
			margin-left: 8px;
			text-align: center;
		}

		.love {
			margin-left: 10px;
		}

		.controller {
			flex: 1;
			padding-right: 100px;
			display: flex;
			align-items: center;
			justify-content: center;

			.loop-img {
				width: 30px;
				margin-right: 10px;
			}

			.u-icon {
				margin: 0 15px;

				&.play {
					color: $uni-color-primary;
				}
			}
			
			.loop-type-view{
				position: relative;
				cursor: pointer;
				.loop-type-select{
					position: absolute;
					width: 90px;
					bottom: 35px;
					background-color: #fff;
					border-radius: 4px;
					left: -30px;
					border: 1px solid #efefef;
					padding: 6px 0;
					cursor: pointer;
					text{
						cursor: pointer;
						display: block;
						font-size: 13px;
						line-height: 27px;
						text-align: center;
					}
				}
			}
		}

		.list {
			margin-right: 50px;
			cursor: pointer;
		}
	}
</style>
